<script lang="ts" setup>
import { computed, ref } from 'vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
interface User {
  water: string
  water_fee: string
  electrical: string
  electrical_fee: string
  total_fee: string
  pay_status: string
  billtime: string
  pay_time: string
}
const language = ref('zh-cn')
const locale = computed(() => (language.value === 'zh-cn' ? zhCn : en))
const search = ref('')
const filterTableData = computed(() =>
    tableData.filter(
        (data) =>
            !search.value ||
            data.name.toLowerCase().includes(search.value.toLowerCase())
    )
)
const handleEdit = (index: number, row: User) => {
  console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
  console.log(index, row)
}

const toggle = () => {
  language.value = language.value === 'zh-cn' ? 'en' : 'zh-cn'
}
const tableData: User[] = [
  {
  water: '100',
  water_fee: '100',
  electrical: '100',
  electrical_fee: '100',
  total_fee: '200',
  pay_status: '已缴费',
  billtime: '2021-01-01',
  pay_time: '2021-01-01',
  },
]
</script>

<template>

  <el-table :data="filterTableData" class="table" >
    <el-table-column label="用水量" prop="water" />
    <el-table-column label="水费" prop="water_fee" />
    <el-table-column label="用电量" prop="electrical" />
    <el-table-column label="电费" prop="electrical_fee" />
    <el-table-column label="总费用" prop="total_fee" />
    <el-table-column label="缴费状态" prop="pay_status" />
    <el-table-column label="账单时间" prop="billtime" />
    <el-table-column label="缴费时间" prop="pay_time" />
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="large" placeholder="搜索历史账单" />
      </template>
    </el-table-column>
  </el-table>
  <div style="margin-top:10px;">
  <el-row class="pagination">
    <el-button mb-2 @click="toggle" class="tranlate">Switch Language</el-button>
    <br />
    <el-config-provider :locale="locale">
    <el-col span="8" :offset="8">
      <el-pagination offset="5" background layout="prev, pager, next, jumper" :total="1000" />
    </el-col>
    </el-config-provider>
  </el-row>
</div>

</template>


<style scoped>

.table{
  width: 85%;
  margin-left:10px;
  margin-top:20px;
}
.pagination{
  margin-top:20px;
  margin-left: 400px;
}
.tranlate{
  display: none;
}
</style>